<template>
  <div class="blogDetail">
    <nav-bar>
        <div slot="left" class="navBarLeft" @click="backClick">
            <img class="backBtn" src="@/assets/img/find/返回按钮.svg" alt="">
        </div>
        <div slot="right" class="navBarRight">
            <div class="addFriend">添加好友</div>
            <img class="share" src="@/assets/img/find/转发.svg" alt="">
        </div>
    </nav-bar>
    <div class="userName">兔子宝宝</div>
    <scroll class="content">
        <div class="picSwiper">
            <swiper class="swiper">
                <swiper-item v-for="item in img" :key="item.id"><img :src='item.src' alt="" @load="imageLoad"></swiper-item>
            </swiper>
        </div>
        <div class="detailText">
            <div class="title">{{ blogInf.article }}</div>
            <div class="text">{{ blogInf.content }}</div>
            <div class="articleInfo"><span class="time">05-25</span><span class="address">广东</span></div>
            <div class="comment">
                <div class="editComment">
                    <button>发送</button>
                    <input type="text" placeholder="快来分享你的想法吧~">
                </div>
                <discuss-item></discuss-item>
                <discuss-item></discuss-item>
                <discuss-item></discuss-item>
                <discuss-item></discuss-item>
                <discuss-item></discuss-item>
            </div>
        </div>
    </scroll>
    <blog-bottom class="blogBottom" :messageInf="interactiveInf"></blog-bottom>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import Swiper from '../../../components/common/swiper/Swiper.vue'
import SwiperItem from '../../../components/common/swiper/SwiperItem.vue'
import Scroll from '../../../components/common/scroll/Scroll.vue'
import BlogBottom from './blogBottom.vue'
import DiscussItem from '@/views/find/findChild/discussItem.vue'
import {getBlogDetail} from '@/network/publish'
export default {
    name: 'BlogDetail',
    components: { 
        NavBar,
        Swiper,
        SwiperItem,
        Scroll,
        BlogBottom,
        DiscussItem
    },
    data() {
        return {
            blogInf:{},
            interactiveInf: {},
            img: [
                {id:1,src:require('@/assets/img/find/样图3.png')},
                {id:2,src:require('@/assets/img/find/样图2.png')},
                {id:3,src:require('@/assets/img/find/样图1.png')},
                {id:4,src:require('@/assets/img/find/样图4.png')},
            ]
        }
    },
    mounted() {
        this.getBlogInf()
        // 通过接口获取文章详细信息
        // getBlogDetail(this.blogInf.articleId).then( res => {
        //     console.log('res',res);
        // })
    },
    methods: {
       imageLoad(){
        if(!this.isLoad){
          this.$emit('swiperImageLoad')
          this.isLoad = true
        }
      },
      backClick(){
        this.$router.back()
      },
      async getBlogInf() {
        this.blogInf = this.$route.query
      }
    },
    watch: {
        blogInf(newValue){
            this.interactiveInf = newValue
        }
    }
}
</script>

<style scoped>
/* 导航栏样式 */
/* 左边 */
.navBarLeft {
    position: relative;
    display: flex;
}
/* 返回按钮样式 */
.backBtn {
    height: 20px;
    margin-left: 5px;
    margin-top: 10px;
}
.userName{
    position: absolute;
    top: 10px;
    left: 30px;
    font-size: 18px;
}
/* 右边 */
.navBarRight {
    display: flex;
}
.addFriend {
    flex: 2;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    margin-top: 5px;
    color: #11b1c0;
    border: 1px solid #11dff1;
    border-radius: 10px;
}
.share {
    flex: 1;
    height: 20px;
    margin: 10px;
}
/* 滚动屏幕 */
.content {
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
/* 轮播图 */
.swiper {
    height: 250px;
}
.detailText {
    padding: 20px;
}
/* 文章标题样式 */
.title {
    font-size: 18px;
    font-weight: 600;
}
/* 文章内容样式 */
.text {
    padding-top: 10px;
    line-height: 2;
}
/* 设置文章发布信息样式 */
.articleInfo {
    position: relative;
    font-size: 10px;
    padding-top: 10px;
    color: #c6caca;
}
.articleInfo::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #c6caca4d;
    position: absolute;
    left: 0;
    bottom: -10px;
}
.articleInfo span{
    margin-right: 5px;
}
/* 评论发表框样式 */
.editComment {
    padding-top: 30px;
}
.editComment button {
    color: #fff;
    background-color: #11dff1;
    padding: 5px;
    border: none;
    border-radius: 10px;
}
.editComment input {
    height: 30px;
    width: 280px;
    margin-left: 10px;
    padding: 10px;
    border: none;
    border-radius: 15px;
    background-color: #c6caca34;
    outline: none;
    caret-color:#05def1;
}
/* 底部样式 */
.blogBottom {

}
</style>